<template>
  <NSpace vertical :size="16">
    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
      <NGi span="24 s:24 m:4">
        <NCard :bordered="false" class="card-wrapper" >
          <template #header>
            <n-button-group size="small" style="width: 100%" >
              <n-button type="info" ghost style="width: 33.3%">
                <template #icon>
                  <icon-material-symbols-expand-all/>
                </template>
                展开
              </n-button>
              <n-button type="info" ghost style="width: 33.3%">
                <template #icon>
                  <icon-material-symbols-collapse-all/>
                </template>
                收起
              </n-button>
              <n-button type="info" ghost style="width: 33.3%">
                <template #icon>
                  <icon-material-symbols-edit-square-outline/>
                </template>
                修改
              </n-button>
            </n-button-group>
          </template>
          <template #default class="p1">
            <n-tree
              block-line
              :data="treeData"
              :default-expanded-keys="defaultExpandedKeys"
              key-field="whateverKey"
              label-field="whateverLabel"
              children-field="whateverChildren"
              selectable
            />
          </template>
        </NCard>
      </NGi>
      <NGi span="24 s:24 m:20">
        <NCard :bordered="false" class="card-wrapper">
          <template #header>
            <NSpace wrap justify="end" class="<sm:w-200px">
              <NButton size="small" ghost type="primary" @click="add">
                <template #icon>
                  <icon-ic-round-plus class="text-icon" />
                </template>
                {{ $t('common.add') }}
              </NButton>
              <NPopconfirm @positive-click="batchDelete">
                <template #trigger>
                  <NButton size="small" ghost type="error" :disabled="checkedRowKeys.length === 0">
                    <template #icon>
                      <icon-ic-round-delete class="text-icon" />
                    </template>
                    {{ $t('common.batchDelete') }}
                  </NButton>
                </template>
                {{ $t('common.confirmDelete') }}
              </NPopconfirm>
              <NButton size="small" @click="refresh">
                <template #icon>
                  <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
                </template>
                {{ $t('common.refresh') }}
              </NButton>
              <TableColumnSetting v-model:columns="columns" v-if="columns.length  > 0" />
            </NSpace>
          </template>
          <n-data-table
            :bordered="false"
            :single-line="false"
            :columns="columns"
            :data="tableData"
            :pagination="pagination"
          />
        </NCard>
      </NGi>
    </NGrid>
  </NSpace>
</template>
<script setup lang="tsx">
import {computed, ref} from 'vue';
import {NButton, NPopconfirm} from 'naive-ui';
import {useAppStore} from '@/store/modules/app';
import {TreeOption} from "naive-ui";
import {repeat} from 'seemly'
import {useLoading} from "~/packages/hooks";
import {$t} from "@/locales";
const {loading} = useLoading();
const appStore = useAppStore();
const gap = computed(() => (appStore.isMobile ? 0 : 8));
const defaultExpandedKeys = ref(['40', '41']);
const treeData = ref<TreeOption[] | undefined>([
  {
    key:'1',
    value: '电子产品',
  },
]);
const columns = ref([
  {
    type: 'selection',
    align: 'center',
    width: 48
  },
  {
    key: 'name',
    title: '商品名称',
    align: 'center',
    minWidth: 100
  },
  {
    key: 'price',
    title: '商品价格',
    align: 'center',
    minWidth: 100
  },
  {
    key: 'operate',
    title: $t('common.operate'),
    align: 'center',
    width: 130,
    render: row => (
      <div class="flex-center gap-8px">
      <NButton type="primary" ghost size="small" onClick={() => handleEdit(row.id)}>
        {$t('common.edit')}
      </NButton>
      </div>
    )
  }
]);
const tableData = ref([]);
const pagination = ref({});
const checkedRowKeys = ref<string[]>([]);
function createData(level = 4, baseKey = ''): TreeOption[] | undefined {
  if (!level) return undefined
  return repeat(6 - level, undefined).map((_, index) => {
    const key = '' + baseKey + level + index
    return {
      whateverLabel: createLabel(level),
      whateverKey: key,
      whateverChildren: createData(level - 1, key)
    }
  })
}

function createLabel(level: number): string {
  if (level === 4) return '商品分类1'
  if (level === 3) return '商品分类2'
  if (level === 2) return '商品分类3'
  if (level === 1) return '商品分类4'
  return ''
}
function batchDelete() {

}
function add() {

}
function refresh() {

}
function handleEdit(id: number) {

}
treeData.value = createData()

</script>
<style scoped>
:deep(.n-card__content){
  padding: 0 .5rem .5rem  !important;
}
:deep(.n-card-header){
  padding: .5rem !important;
}
</style>
